<template>
  <div class="nav-main">
    <div class="topbar">
      <div class="container">
        <div class="topbar-inner">
          <div
            class="row align-items-center justify-content-center justify-content-lg-between"
          >
            <div class="topbar-item">
              <div class="topbar-brand">
                <a href="javascript:;">
                  <img :src="require('assets/images/logo.png')" alt="logo" />
                </a>
              </div>
            </div>
            <div class="topbar-item">
              <div class="topbar-search">
                <form>
                  <input
                    type="text"
                    class="form-control"
                    placeholder="Search product"
                  />
                  <button class="btn main-btn" type="submit">Search</button>
                </form>
              </div>
            </div>
            <div class="topbar-item topbar-item-rightside">
              <div class="topbar-action">
                <div class="topbar-action-item">
                  <a
                    href="javascript:;"
                    @click="$jumpLink('/user/setting/account')"
                  >
                    <i class="flaticon-user"></i>
                    <span>Account</span>
                  </a>
                </div>
                <div class="topbar-action-item">
                  <a
                    href="javascript:;"
                    @click="$jumpLink('/shop/shop-wishlist')"
                  >
                    <i class="flaticon-like"></i>
                    <span>Wishlist</span>
                    <span class="topbar-action-counter">
                      {{ wishlistCount }}
                    </span>
                  </a>
                </div>
                <div class="topbar-action-item cart-option-dropdown">
                  <a href="javascript:;" class="cartbtn">
                    <i class="flaticon-shopping-cart"></i>
                    <span>Cart</span>
                    <span class="topbar-action-counter">
                      {{ cartCount }}
                    </span>
                  </a>
                  <!-- 购物车modal -->
                  <div class="cart-modal">
                    <div class="cart-close-btn close-btn">
                      <i class="flaticon-close"></i>
                    </div>
                    <div class="cart-modal-products">
                      <template v-for="(item, index) in cartList" :key="index">
                        <div class="cart-modal-product">
                          <div class="cart-product-info">
                            <a @click="jumpSingleShop(item)">
                              <div class="cart-product-thumb">
                                <img
                                  src="assets/images/products/product-13.png"
                                  alt="product"
                                />
                              </div>
                              <div class="cart-product-details">
                                <h3>Stylish Chair</h3>
                                <p>
                                  Price:
                                  <span>
                                    {{ item.currentPrice }} /
                                    <del>{{ item.originalPrice }}</del>
                                  </span>
                                </p>
                                <p>
                                  Qty: <span>{{ item.quantity }}</span>
                                </p>
                              </div>
                            </a>
                          </div>
                          <div class="cart-product-remove">
                            <a
                              href="javascript:;"
                              @click="deleteProduct(item.id)"
                            >
                              <i class="flaticon-delete"></i>
                            </a>
                          </div>
                        </div>
                      </template>
                    </div>
                    <div class="cart-details">
                      <div class="cart-total-box">
                        <div class="cart-total-item">
                          <h4>Subtotal</h4>
                          <p>{{ subTotal }}</p>
                        </div>
                        <!-- 
                          <div class="cart-total-item">
                          <h4>Vat <span>(2%)</span></h4>
                          <p>$40.0</p>
                        </div> 
                        -->
                        <!-- 
                          <div class="cart-total-item">
                          <h4>Total</h4>
                          <p>$540.0</p>
                        </div> 
                        -->
                      </div>
                      <a
                        href="javascript:;"
                        class="btn main-btn full-width"
                        @click="() => $jumpLink('/shop/shop-cart')"
                      >
                        Add To Cart
                      </a>
                      <!-- 
                        <a
                        href="checkout.html"
                        class="btn main-btn full-width main-btn-bgless"
                      >
                        Checkout
                      </a> 
                      -->
                    </div>
                  </div>
                  <!--  -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="navbar-area">
      <div class="container">
        <div class="mobile-nav">
          <div class="mobile-nav-category">
            <a class="mobile-nav-category-btn">
              <i class="flaticon-menu"></i>
            </a>
            <div class="navbar-category">
              <div class="navbar-category-dropdown">
                <ul>
                  <li>
                    <a href="javascript:;">New Arrival Product</a>
                  </li>
                  <li>
                    <a href="javascript:;">Featured Products</a>
                  </li>
                  <li>
                    <a href="javascript:;">Our Daily Sales</a>
                  </li>
                  <li>
                    <a href="javascript:;">Best Seller Product</a>
                  </li>
                  <li>
                    <a href="javascript:;">Furnished Product</a>
                  </li>
                  <li>
                    <a href="javascript:;">Our Recent Product</a>
                  </li>
                  <li>
                    <a href="javascript:;">Top Rated Product</a>
                  </li>
                  <li>
                    <a href="javascript:;">Chair Related Item</a>
                  </li>
                  <li>
                    <a href="javascript:;">Sofa Related Item</a>
                  </li>
                  <li>
                    <a href="javascript:;">Wooden Products</a>
                  </li>
                  <li>
                    <a href="javascript:;">Plastic Products</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <a href="javascript:;">
            <img
              :src="require('assets/images/logo.png')"
              alt="logo"
              class="logo"
            />
          </a>
          <div class="navbar-option">
            <div class="navbar-option-item d-none mobile-nav-sidebar">
              <a class="mobile-option-dot">
                <i class="flaticon-more"></i>
              </a>

              <div class="mobile-option-dropdown">
                <div class="navbar-option-item">
                  <div class="navbar-language dropdown language-option">
                    <button
                      class="dropdown-toggle"
                      type="button"
                      id="language2"
                      data-bs-toggle="dropdown"
                      aria-haspopup="true"
                      aria-expanded="false"
                    >
                      <i class="flaticon-worldwide"></i>
                      <span class="lang-name"> English </span>
                    </button>
                    <div
                      class="dropdown-menu language-dropdown-menu"
                      aria-labelledby="language2"
                    >
                      <a class="dropdown-item">
                        <img
                          :src="require('assets/images/uk.png')"
                          alt="flag"
                        />
                        English
                      </a>
                      <a class="dropdown-item">
                        <img
                          :src="require('assets/images/china.png')"
                          alt="flag"
                        />
                        简体中文
                      </a>
                      <a class="dropdown-item">
                        <img
                          :src="require('assets/images/uae.png')"
                          alt="flag"
                        />
                        العربيّة
                      </a>
                    </div>
                  </div>
                </div>
                <div class="navbar-option-item">
                  <a href="javascript:;">
                    <i class="flaticon-user"></i>
                  </a>
                </div>
                <div class="navbar-option-item dropdown">
                  <button
                    type="button"
                    id="search2"
                    data-bs-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false"
                  >
                    <i class="flaticon-search"></i>
                  </button>
                  <div
                    class="dropdown-menu mobile-search"
                    aria-labelledby="search2"
                  >
                    <form>
                      <input
                        type="text"
                        class="form-control"
                        placeholder="Search product"
                      />
                      <button class="btn main-btn" type="submit">Search</button>
                    </form>
                  </div>
                </div>
                <div class="navbar-option-item">
                  <a
                    href="javascript:;"
                    @click="$jumpLink('/shop/shop-wishlist')"
                  >
                    <i class="flaticon-like"></i>
                    <span class="topbar-action-counter">
                      {{ wishlistCount }}
                    </span>
                  </a>
                </div>
              </div>
            </div>
            <div class="navbar-option-item d-none d-md-block">
              <div class="navbar-language dropdown language-option">
                <button
                  class="dropdown-toggle"
                  type="button"
                  id="language1"
                  data-bs-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  <i class="flaticon-worldwide"></i>
                  <span class="lang-name"> English </span>
                </button>
                <div
                  class="dropdown-menu language-dropdown-menu"
                  aria-labelledby="language1"
                >
                  <a class="dropdown-item">
                    <img :src="require('assets/images/uk.png')" alt="flag" />
                    English
                  </a>
                  <a class="dropdown-item">
                    <img :src="require('assets/images/china.png')" alt="flag" />
                    简体中文
                  </a>
                  <a class="dropdown-item">
                    <img :src="require('assets/images/uae.png')" alt="flag" />
                    العربيّة
                  </a>
                </div>
              </div>
            </div>
            <div class="navbar-option-item d-none d-lg-none d-md-block">
              <a href="javascript:;">
                <i class="flaticon-user"></i>
              </a>
            </div>
            <div class="navbar-option-item d-none d-lg-none d-md-block">
              <button
                type="button"
                id="search1"
                data-bs-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
              >
                <i class="flaticon-search"></i>
              </button>
              <div
                class="dropdown-menu mobile-search"
                aria-labelledby="search1"
              >
                <form>
                  <input
                    type="text"
                    class="form-control"
                    placeholder="Search product"
                  />
                  <button class="btn main-btn" type="submit">Search</button>
                </form>
              </div>
            </div>
            <div class="navbar-option-item d-none d-lg-none d-md-block">
              <a href="javascript:;" @click="$jumpLink('/shop/shop-wishlist')">
                <i class="flaticon-like"></i>
                <span class="topbar-action-counter">{{ wishlistCount }}</span>
              </a>
            </div>
            <div
              class="navbar-option-item d-lg-none d-md-block cart-option-dropdown"
            >
              <a class="navbar-add-cart cartbtn">
                <i class="flaticon-shopping-cart"></i>
                <span class="topbar-action-counter">{{ cartCount }}</span>
              </a>
              <div class="cart-modal active">
                <div class="cart-close-btn close-btn">
                  <i class="flaticon-close"></i>
                </div>
                <div class="cart-modal-products">
                  <template v-for="(item, index) in cartList" :key="index">
                    <div class="cart-modal-product">
                      <div class="cart-product-info">
                        <a @click="jumpSingleShop(item)">
                          <div class="cart-product-thumb">
                            <img
                              src="assets/images/products/product-13.png"
                              alt="product"
                            />
                          </div>
                          <div class="cart-product-details">
                            <h3>{{ item.title }}</h3>
                            <p>
                              Price:
                              <span>
                                {{ item.currentPrice }} /
                                <del>{{ item.originalPrice }}</del>
                              </span>
                            </p>
                            <p>
                              Qty: <span>{{ item.quantity }}</span>
                            </p>
                          </div>
                        </a>
                      </div>
                      <div class="cart-product-remove">
                        <a href="javascript:;" @click="deleteProduct(item.id)">
                          <i class="flaticon-delete"></i>
                        </a>
                      </div>
                    </div>
                  </template>
                </div>
                <div class="cart-details">
                  <div class="cart-total-box">
                    <div class="cart-total-item">
                      <h4>Subtotal</h4>
                      <p>{{ subTotal }}</p>
                    </div>
                    <!-- 
                      <div class="cart-total-item">
                      <h4>Vat <span>(2%)</span></h4>
                      <p>$40.0</p>
                    </div> 
                    -->
                    <!-- 
                      <div class="cart-total-item">
                      <h4>Total</h4>
                      <p>$540.0</p>
                    </div>
                     -->
                  </div>
                  <a
                    href="javascript:;"
                    class="btn main-btn full-width"
                    @click="() => $jumpLink('/shop/shop-cart')"
                  >
                    Add To Cart
                  </a>
                  <!-- 
                    <a
                    href="checkout.html"
                    class="btn main-btn full-width main-btn-bgless"
                    >Checkout</a
                  > 
                  -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main-nav">
        <div class="container">
          <nav class="navbar navbar-expand-md navbar-light">
            <div class="navbar-category">
              <button class="btn">
                <i class="flaticon-menu"></i>
                Categories
              </button>
              <div
                class="navbar-category-dropdown default-category-dropdown"
                style=""
              >
                <ul>
                  <li>
                    <a href="javascript:;">New Arrival Product</a>
                  </li>
                  <li>
                    <a href="javascript:;">Featured Products</a>
                  </li>
                  <li>
                    <a href="javascript:;">Our Daily Sales</a>
                  </li>
                  <li>
                    <a href="javascript:;">Best Seller Product</a>
                  </li>
                  <li>
                    <a href="javascript:;">Furnished Product</a>
                  </li>
                  <li>
                    <a href="javascript:;">Our Recent Product</a>
                  </li>
                  <li>
                    <a href="javascript:;">Top Rated Product</a>
                  </li>
                  <li>
                    <a href="javascript:;">Chair Related Item</a>
                  </li>
                  <li>
                    <a href="javascript:;">Sofa Related Item</a>
                  </li>
                  <li>
                    <a href="javascript:;">Wooden Products</a>
                  </li>
                  <li>
                    <a href="javascript:;">Plastic Products</a>
                  </li>
                </ul>
              </div>
            </div>
            <div
              class="collapse navbar-collapse mean-menu"
              id="navbarSupportedContent"
              style=""
            >
              <ul class="navbar-nav mx-auto">
                <template v-for="(item, index) in menuData" :key="index">
                  <template v-if="hasChildrenMenu(item)">
                    <li class="nav-item">
                      <a class="nav-link dropdown-toggle">
                        {{ item.title }}
                      </a>
                      <ul class="dropdown-menu">
                        <template
                          v-for="(child, childIndex) in item.children"
                          :key="childIndex"
                        >
                          <template v-if="hasChildrenMenu(child)">
                            <li class="nav-item">
                              <a class="nav-link dropdown-toggle">
                                {{ child.title }}
                              </a>
                              <ul class="dropdown-menu">
                                <template
                                  v-for="(cc, ccIndex) in child.children"
                                  :key="ccIndex"
                                >
                                  <li class="nav-item">
                                    <a
                                      href="javascript:;"
                                      @click="$jumpLink(cc.url)"
                                      :title="cc.title"
                                      >{{ cc.title }}
                                    </a>
                                  </li>
                                </template>
                              </ul>
                            </li>
                          </template>
                          <template v-else>
                            <li class="nav-item">
                              <a
                                href="javascript:;"
                                @click="$jumpLink(child.url)"
                                :title="child.title"
                              >
                                {{ child.title }}
                              </a>
                            </li>
                          </template>
                        </template>
                      </ul>
                    </li>
                  </template>
                  <template v-else>
                    <li class="nav-item">
                      <a
                        href="javascript:;"
                        class="nav-link"
                        @click="$jumpLink(item.url)"
                        :title="item.title"
                      >
                        {{ item.title }}</a
                      >
                    </li>
                  </template>
                </template>
              </ul>
            </div>
            <div class="navbar-option">
              <div
                class="navbar-option-item navbar-language dropdown language-option"
              >
                <button
                  class="dropdown-toggle"
                  type="button"
                  id="language3"
                  data-bs-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  <i class="flaticon-worldwide"></i>
                  <span class="lang-name"> English </span>
                </button>
                <div
                  class="dropdown-menu language-dropdown-menu"
                  aria-labelledby="language3"
                >
                  <a class="dropdown-item">
                    <img :src="require('assets/images/uk.png')" alt="flag" />
                    English
                  </a>
                  <a class="dropdown-item">
                    <img :src="require('assets/images/china.png')" alt="flag" />
                    简体中文
                  </a>
                  <a class="dropdown-item">
                    <img :src="require('assets/images/uae.png')" alt="flag" />
                    العربيّة
                  </a>
                </div>
              </div>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useShopStore } from "src/stores/shop";
const shopStore = useShopStore();

import CommonData from "src/datas/CommonData.json";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
  computed,
  nextTick,
} from "vue";

// const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({
  wishlistCount: computed(() => shopStore.wishlistCount),
  cartCount: computed(() => shopStore.cartCount),
  cartList: computed(() => shopStore.cartList),
  subTotal: computed(() => {
    var total = 0;
    for (var i = 0, j = data.cartList.length; i < j; i++) {
      total += data.cartList[i].quantity * data.cartList[i].currentPrice;
    }
    return total;
  }),
  //
  menuData: CommonData.menuData,
});
const { wishlistCount, cartCount, cartList, subTotal, menuData } = toRefs(data);

onBeforeMount(() => {
  // console.log(data.cartList);
});
onMounted(() => {
  init();
});

const init = () => {
  nextTick(function () {
    !(function ($) {
      // Mean menu
      jQuery(".mean-menu").meanmenu({
        meanScreenWidth: "1199",
      });
    })(jQuery);

    $(".navbar-category button").on("click", function () {
      $(this)
        .siblings(".navbar-category-dropdown")
        .slideToggle()
        .toggleClass("active");
    });

    $(".mobile-nav-category-btn").on("click", function (e) {
      e.preventDefault();
      $(this).siblings(".navbar-category").toggleClass("active");
    });

    $(".mobile-option-dot").on("click", function () {
      $(this).siblings(".mobile-option-dropdown").toggleClass("show");
    });
    $("body").on("click", function (e) {
      if (
        !$(".mobile-option-dot").is(e.target) &&
        $(".mobile-option-dot").has(e.target).length === 0 &&
        $(".show").has(e.target).length === 0
      ) {
        $(".mobile-option-dropdown").removeClass("show");
      }
    });

    // Cart modal
    $(".cartbtn").on("click", function (e) {
      e.preventDefault();
      $(this).siblings(".cart-modal").addClass("active");
      // $("body").addClass("overlay-layer")
    });
    $(".cart-close-btn").on("click", function (e) {
      e.preventDefault();
      $(".cart-modal").removeClass("active");
    });
    $("body").on("click", function (e) {
      if (
        !$(".cart-option-dropdown").is(e.target) &&
        $(".cart-option-dropdown").has(e.target).length === 0 &&
        $("active").has(e.target).length === 0
      ) {
        $(".cart-modal").removeClass("active");
      }
    });
    //
  });
};

const jumpSingleShop = (item) => {
  proxy.$router.push({
    name: "ShopSingle",
    params: { product: JSON.stringify(item) },
  });
};

const deleteProduct = (id) => {
  shopStore.deleteCartListProduct(id);
};

//
const hasChildrenMenu = (item) => {
  return (
    item.children != undefined && item.children && item.children.length > 1
  );
};
</script>

<script></script>

<style lang="scss" scoped></style>
